<template>
  <div class="contract-container">
    <!-- 顶部操作栏 -->
    <div class="operation-bar">
      <div class="left">
        <el-button type="primary" @click="handleAddContract" :icon="Plus">新增合同</el-button>
        <el-button type="success" @click="handleAddTravel" :icon="Plus">新增旅游信息</el-button>
      </div>
      <el-input
        v-model="searchKey"
        placeholder="搜索合同编号/线路名称"
        class="search-input"
        :prefix-icon="Search"
        clearable
      />
    </div>

    <!-- 合同列表 -->
    <el-card class="table-card" :body-style="{ padding: '0px' }" v-loading="loading">
      <el-tabs v-model="activeTab" class="custom-tabs">
        <el-tab-pane label="合同信息" name="contract">
          <div v-if="!contractList.length" style="text-align: center; padding: 20px;">
            暂无数据
          </div>
          <template v-else>
            <div style="padding: 10px; color: #666; font-size: 12px;">
              总数据: {{ contractList.length }} | 
              过滤后: {{ filteredContractList.length }} | 
              当前页: {{ paginatedContractList.length }}
            </div>
            
            <el-table 
              v-if="paginatedContractList.length > 0"
              :data="paginatedContractList" 
              style="width: 100%"
              :header-cell-style="{ background: '#f5f7fa' }"
              border>
              <!-- 合同ID -->
              <el-table-column 
                prop="travelContractId"
                label="合同ID"
                width="100"
                align="center">
                <template #default="{ row }">
                  <span class="contract-id">{{ row.travelContractId }}</span>
                </template>
              </el-table-column>

              <!-- 线路名称 -->
              <el-table-column 
                prop="routeName"
                label="线路名称"
                min-width="180"
                align="center">
                <template #default="{ row }">
                  <el-tooltip 
                    :content="row.routeName" 
                    placement="top" 
                    :show-after="500">
                    <span class="route-name">{{ row.routeName }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>

              <!-- 导游姓名 -->
              <el-table-column 
                prop="name"
                label="导游姓名"
                width="120"
                align="center">
                <template #default="{ row }">
                  <span class="guide-name">{{ row.name }}</span>
                </template>
              </el-table-column>

              <!-- 导游编号 -->
              <el-table-column 
                prop="guideNumber"
                label="导游编号"
                width="120"
                align="center">
                <template #default="{ row }">
                  <el-tag 
                    size="small" 
                    type="info" 
                    effect="plain">
                    {{ row.guideNumber }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 导游等级 -->
              <el-table-column 
                prop="guideLevel"
                label="导游等级"
                width="120"
                align="center">
                <template #default="{ row }">
                  <el-tag 
                    :type="getGuideLevelType(row.guideLevel)"
                    effect="light"
                    class="guide-level-tag">
                    {{ row.guideLevel }}级导游
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 所属分公司 -->
              <el-table-column 
                prop="branchName"
                label="所属分公司"
                width="150"
                align="center">
                <template #default="{ row }">
                  <span class="branch-name">{{ row.branchName }}</span>
                </template>
              </el-table-column>

              <!-- 服务等级 -->
              <el-table-column 
                prop="serviceLevel"
                label="服务等级"
                width="120"
                align="center">
                <template #default="{ row }">
                  <el-tag 
                    :type="getServiceLevelType(row.serviceLevel)"
                    effect="dark"
                    class="service-level-tag">
                    {{ getServiceLevelLabel(row.serviceLevel) }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 线路成本 -->
              <el-table-column 
                prop="price"
                label="线路成本"
                width="120"
                align="center">
                <template #default="{ row }">
                  <span class="price-cell negative">
                    ¥{{ row.price?.toLocaleString() ?? 0 }}
                  </span>
                </template>
              </el-table-column>

              <!-- 保险金额 -->
              <el-table-column 
                prop="insurance"
                label="保险金额"
                width="120"
                align="center">
                <template #default="{ row }">
                  <span class="price-cell warning">
                    ¥{{ row.insurance?.toLocaleString() ?? 0 }}
                  </span>
                </template>
              </el-table-column>

              <!-- 旅游金额 -->
              <el-table-column 
                prop="money"
                label="旅游金额"
                width="120"
                align="center">
                <template #default="{ row }">
                  <span class="price-cell positive">
                    ¥{{ row.money?.toLocaleString() ?? 0 }}
                  </span>
                </template>
              </el-table-column>

              <!-- 操作列 -->
              <el-table-column 
                label="操作"
                width="180"
                fixed="right"
                align="center">
                <template #default="{ row }">
                  <el-button 
                    type="primary" 
                    link 
                    @click="handleEditContract(row)">
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="filteredContractList.length"
                background
              />
            </div>
          </template>
        </el-tab-pane>

        <el-tab-pane label="旅游信息" name="travel">
          <div v-if="!travelList.length" style="text-align: center; padding: 20px;">
            暂无数据
          </div>
          <template v-else>
            <el-table 
              :data="paginatedTravelList" 
              style="width: 100%"
              :header-cell-style="{ background: '#f5f7fa' }"
              border>
              <el-table-column 
                prop="travelId"
                label="旅游ID" 
                width="100" 
                align="center" 
              />
              <el-table-column 
                prop="routeName" 
                label="线路名称" 
                min-width="180" 
                align="center" 
              />
              <el-table-column 
                prop="message" 
                label="景点信息" 
                min-width="200" 
                align="center" 
                show-overflow-tooltip 
              />
              <el-table-column 
                prop="money" 
                label="线路价格" 
                width="120" 
                align="center"
              >
                <template #default="scope">
                  <span style="color: #67C23A">
                    ¥{{ scope.row.money?.toLocaleString() ?? 0 }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column 
                prop="travelStartTime" 
                label="开始时间" 
                width="180" 
                align="center" 
              />
              <el-table-column 
                prop="travelEndTime" 
                label="结束时间" 
                width="180" 
                align="center" 
              />
              <el-table-column 
                label="操作" 
                width="180" 
                fixed="right" 
                align="center"
              >
                <template #default="scope">
                  <el-button 
                    type="primary" 
                    link 
                    @click="handleEditTravel(scope.row)"
                  >
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="travelCurrentPage"
                v-model:page-size="travelPageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="filteredTravelList.length"
                background
              />
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 合同表单对话框 -->
    <el-dialog
      v-model="contractDialogVisible"
      :title="contractFormType === 'add' ? '新增合同' : '编辑合同'"
      width="600px"
      :close-on-click-modal="false"
      destroy-on-close>
      <el-form
        ref="contractFormRef"
        :model="contractForm"
        :rules="contractRules"
        label-width="100px"
        class="custom-form">
        <el-form-item label="服务等级" prop="serviceLevel">
          <el-select v-model="contractForm.serviceLevel" placeholder="请选择服务等级" class="full-width">
            <el-option label="一级服务" :value="1" />
            <el-option label="二级服务" :value="2" />
            <el-option label="三级服务" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="保险金额" prop="insurance">
          <el-input-number 
            v-model="contractForm.insurance" 
            :min="0"
            :precision="2"
            :step="100"
            class="full-width" />
        </el-form-item>
        <el-form-item label="旅游金额" prop="money">
          <el-input-number 
            v-model="contractForm.money" 
            :min="0"
            :precision="2"
            :step="100"
            class="full-width" />
        </el-form-item>
        <el-form-item label="线路选择" prop="routeId">
          <el-select 
            v-model="contractForm.routeId" 
            placeholder="请选择旅游线路"
            class="full-width">
            <el-option
              v-for="route in routeOptions"
              :key="route.routeId"
              :label="route.routeName"
              :value="route.routeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="导游选择" prop="guideId">
          <el-select 
            v-model="contractForm.guideId" 
            placeholder="请选择导游"
            class="full-width">
            <el-option
              v-for="guide in guideOptions"
              :key="guide.guideId"
              :label="`${guide.name} (${guide.guideNumber})`"
              :value="guide.guideId" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="contractDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitContractForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 旅游信息表单对话框 -->
    <el-dialog
      v-model="travelDialogVisible"
      :title="travelFormType === 'add' ? '新增旅游信息' : '编辑旅游信息'"
      width="600px"
      :close-on-click-modal="false"
      destroy-on-close>
      <el-form
        ref="travelFormRef"
        :model="travelForm"
        :rules="travelRules"
        label-width="100px"
        class="custom-form">
        <el-form-item label="合同选择" prop="travelContractId">
          <el-select 
            v-model="travelForm.travelContractId" 
            placeholder="请选择关联合同"
            class="full-width">
            <el-option
              v-for="contract in contractOptions"
              :key="contract.travelContractId"
              :label="`合同${contract.travelContractId} - ${contract.routeName}`"
              :value="contract.travelContractId" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="travelStartTime">
          <el-date-picker
            v-model="travelForm.travelStartTime"
            type="datetime"
            placeholder="选择开始时间"
            class="full-width" />
        </el-form-item>
        <el-form-item label="结束时间" prop="travelEndTime">
          <el-date-picker
            v-model="travelForm.travelEndTime"
            type="datetime"
            placeholder="选择结束时间"
            class="full-width" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="travelDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitTravelForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, h } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { contractApi, routeApi, guideApi } from '@/api'
import {stringify} from "querystring";

// 数据定义
const activeTab = ref('contract')
const searchKey = ref('')
const contractList = ref<any[]>([])
const travelList = ref<any[]>([])
const contractDialogVisible = ref(false)
const travelDialogVisible = ref(false)
const contractFormType = ref<'add' | 'edit'>('add')
const travelFormType = ref<'add' | 'edit'>('add')
const contractFormRef = ref<FormInstance>()
const travelFormRef = ref<FormInstance>()
const currentPage = ref(1)
const pageSize = ref(10)
const travelCurrentPage = ref(1)
const travelPageSize = ref(10)

// 选项数据
const routeOptions = ref<any[]>([])
const guideOptions = ref<any[]>([])
const contractOptions = ref<any[]>([])

// 表单数据
const contractForm = ref({
  travelContractId: undefined,
  serviceLevel: undefined,
  insurance: 0,
  money: 0,
  routeId: undefined,
  guideId: undefined
})

const travelForm = ref({
  travelId: undefined,
  travelStartTime: '',
  travelContractId: undefined,
  travelEndTime: ''
})

// 表单校验规则
const contractRules = ref<FormRules>({
  serviceLevel: [{ required: true, message: '请选择服务等级', trigger: 'change' }],
  insurance: [{ required: true, message: '请输入保险金额', trigger: 'blur' }],
  money: [{ required: true, message: '请输入旅游金额', trigger: 'blur' }],
  routeId: [{ required: true, message: '请选择旅游线路', trigger: 'change' }],
  guideId: [{ required: true, message: '请选择导游', trigger: 'change' }]
})

const travelRules = ref<FormRules>({
  travelContractId: [{ required: true, message: '请选择关联合同', trigger: 'change' }],
  travelStartTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  travelEndTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ]
})

// 修改计算属性的实现
const filteredContractList = computed(() => {
  const list = contractList.value || []
  if (list.length === 0) return []
  if (!searchKey.value) return list
  
  const searchKeyLower = searchKey.value.toLowerCase()
  return list.filter(item => 
    String(item.travelContractId).toLowerCase().includes(searchKeyLower) || 
    (item.routeName && item.routeName.toLowerCase().includes(searchKeyLower))
  )
})

const filteredTravelList = computed(() => {
  if (!travelList.value) return []
  if (!searchKey.value) return travelList.value
  return travelList.value.filter(item => 
    item.routeName.includes(searchKey.value)
  )
})

// 添加计算属性来处理分页后的合同列表
const paginatedContractList = computed(() => {
  const list = filteredContractList.value
  if (!list || list.length === 0) return []
  
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return list.slice(startIndex, endIndex)
})

// 添加旅游信息分页的计算属性
const paginatedTravelList = computed(() => {
  if (!filteredTravelList.value) return []
  const startIndex = (travelCurrentPage.value - 1) * travelPageSize.value
  const endIndex = startIndex + travelPageSize.value
  return filteredTravelList.value.slice(startIndex, endIndex)
})

// 添加 loading ref
const loading = ref(false)

// 获取项数据
const fetchOptions = async () => {
  loading.value = true
  try {
    const [routeRes, guideRes] = await Promise.all([
      routeApi.getAllRoutes(),
      guideApi.getAllGuides()
    ])
    routeOptions.value = routeRes??[]
    guideOptions.value = guideRes??[]
    contractOptions.value = contractList.value
  } catch (error) {
    ElMessage.error('获取选项数据失败')
  } finally {
    loading.value = false
  }
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const [contractRes, travelRes] = await Promise.all([
      contractApi.getAllContracts(),
      contractApi.getAllTravelInfo()
    ])
    
    if (contractRes) {
      contractList.value = contractRes??[]
    } else {
      console.warn('合同数据为空')
    }
    
    if (travelRes) {
      travelList.value = travelRes??[]
    } else {
      console.warn('旅游数据为空')
    }
    
    // 更新合同选项
    contractOptions.value = contractList.value
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 服务等级处理
const getServiceLevelLabel = (level: number) => {
  return level ? `${level}级服务` : '未知'
}

// 新增/编辑合同
const handleAddContract = () => {
  contractFormType.value = 'add'
  contractForm.value = {
    travelContractId: undefined,
    serviceLevel: undefined,
    insurance: 0,
    money: 0,
    routeId: undefined,
    guideId: undefined
  }
  contractDialogVisible.value = true
}

const handleEditContract = (row: any) => {
  contractFormType.value = 'edit'
  contractForm.value = { ...row }
  contractDialogVisible.value = true
}

// 新增/编辑旅游信息
const handleAddTravel = () => {
  travelFormType.value = 'add'
  travelForm.value = {
    travelId: undefined,
    travelStartTime: '',
    travelContractId: undefined,
    travelEndTime: ''
  }
  travelDialogVisible.value = true
}

const handleEditTravel = (row: any) => {
  travelFormType.value = 'edit'
  travelForm.value = { ...row }
  travelDialogVisible.value = true
}

// 提交合同表单
const submitContractForm = async () => {
  if (!contractFormRef.value) return
  
  await contractFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        if (contractFormType.value === 'add') {
          await contractApi.addContract(contractForm.value)
        } else {
          await contractApi.updateContract(contractForm.value)
        }
        ElMessage.success(contractFormType.value === 'add' ? '添加成功' : '更新成功')
        contractDialogVisible.value = false
        fetchData()
      } catch (error) {
        ElMessage.error(contractFormType.value === 'add' ? '添加失败' : '更新失败')
      }
    }
  })
}

// 添加时间验证函数
const validateTravelTime = () => {
  const startTime = travelForm.value.travelStartTime
  const endTime = travelForm.value.travelEndTime
  
  if (startTime && endTime && new Date(startTime) > new Date(endTime)) {
    ElMessage.error('结束时间不能早于开始时间')
    return false
  }
  return true
}

// 修改提交旅游信息表单的函数
const submitTravelForm = async () => {
  if (!travelFormRef.value) return
  
  await travelFormRef.value.validate(async (valid) => {
    if (valid) {
      // 添加时间验证
      if (!validateTravelTime()) {
        return
      }

      travelForm.value.travelStartTime=new Date(travelForm.value.travelStartTime).toLocaleString()
      travelForm.value.travelEndTime=new Date(travelForm.value.travelEndTime).toLocaleString()
      try {
        if (travelFormType.value === 'add') {
          await contractApi.addTravelInfo(travelForm.value)
        } else {
          await contractApi.updateTravelInfo(travelForm.value)
        }
        ElMessage.success(travelFormType.value === 'add' ? '添加成功' : '更新成功')
        travelDialogVisible.value = false
        fetchData()
      } catch (error) {
        ElMessage.error(travelFormType.value === 'add' ? '添加失败' : '更新失败')
      }
    }
  })
}

onMounted(async () => {
  await fetchData()
  await fetchOptions()
})

// 在 script setup 部分添加以下颜色配置对象
const cellStyleConfig = {
  // 服务等级颜色方案
  serviceLevelColors: {
    1: { 
      color: '#67C23A',
      backgroundColor: '#f0f9eb',
      borderColor: '#e1f3d8'
    },
    2: { 
      color: '#E6A23C',
      backgroundColor: '#fdf6ec',
      borderColor: '#faecd8'
    },
    3: { 
      color: '#F56C6C',
      backgroundColor: '#fef0f0',
      borderColor: '#fde2e2'
    }
  },
  // 导游等级颜色方案
  guideLevelColors: {
    1: {
      color: '#409EFF',
      backgroundColor: '#ecf5ff',
      borderColor: '#d9ecff'
    },
    2: {
      color: '#67C23A',
      backgroundColor: '#f0f9eb',
      borderColor: '#e1f3d8'
    },
    3: {
      color: '#E6A23C',
      backgroundColor: '#fdf6ec',
      borderColor: '#faecd8'
    }
  }
}

// 修改表格列配置
const tableColumns = [
  {
    prop: 'travelContractId',
    label: '合同ID',
    width: '100',
    align: 'center'
  },
  {
    prop: 'routeName',
    label: '线路名称',
    minWidth: '180',
    align: 'center'
  },
  {
    prop: 'name',
    label: '导游姓名',
    width: '120',
    align: 'center'
  },
  {
    prop: 'guideNumber',
    label: '导游编号',
    width: '120',
    align: 'center'
  },
  {
    prop: 'guideLevel',
    label: '导游等级',
    width: '120',
    align: 'center',
    formatter: (row: any) => `${row.guideLevel}级导游`,
    cellStyle: ({ row }: any) => ({
      ...cellStyleConfig.guideLevelColors[row.guideLevel] || {},
      padding: '4px 8px',
      borderRadius: '15px',
      border: '1px solid',
      width: '90px',
      margin: '0 auto',
      fontSize: '13px',
      transition: 'all 0.3s'
    })
  },
  {
    prop: 'branchName',
    label: '所属分公司',
    width: '150',
    align: 'center'
  },
  {
    prop: 'serviceLevel',
    label: '服务等级',
    width: '120',
    align: 'center',
    formatter: (row: any) => getServiceLevelLabel(row.serviceLevel),
    cellStyle: ({ row }: any) => {
      const colors = {
        1: { 
          color: '#67C23A',
          backgroundColor: '#f0f9eb',
          borderColor: '#e1f3d8'
        },
        2: { 
          color: '#E6A23C',
          backgroundColor: '#fdf6ec',
          borderColor: '#faecd8'
        },
        3: { 
          color: '#F56C6C',
          backgroundColor: '#fef0f0',
          borderColor: '#fde2e2'
        }
      }
      return {
        ...colors[row.serviceLevel] || {},
        padding: '4px 0',
        borderRadius: '15px',
        border: '1px solid',
        width: '80px',
        margin: '0 auto',
        fontSize: '13px',
        transition: 'all 0.3s'
      }
    }
  },
  {
    prop: 'price',
    label: '线路成本',
    width: '120',
    align: 'center',
    formatter: (row: any) => `¥${row.price?.toLocaleString() ?? 0}`,
    cellStyle: (row: any) => ({
      color: '#F56C6C',
      fontWeight: 'bold',
      fontSize: '14px',
      backgroundColor: row.price > 10000 ? '#fef0f0' : '',
      transition: 'all 0.3s'
    })
  },
  {
    prop: 'insurance',
    label: '保险金额',
    width: '120',
    align: 'center',
    formatter: (row: any) => `¥${row.insurance?.toLocaleString() ?? 0}`,
    cellStyle: (row: any) => ({
      color: '#E6A23C',
      fontWeight: 'bold',
      fontSize: '14px',
      backgroundColor: row.insurance > 10000 ? '#fdf6ec' : '',
      transition: 'all 0.3s'
    })
  },
  {
    prop: 'money',
    label: '旅游金额',
    width: '120',
    align: 'center',
    formatter: (row: any) => `¥${row.money?.toLocaleString() ?? 0}`,
    cellStyle: (row: any) => ({
      color: '#67C23A',
      fontWeight: 'bold',
      fontSize: '14px',
      backgroundColor: row.money > 10000 ? '#f0f9eb' : '',
      transition: 'all 0.3s'
    })
  },
  {
    label: '操作',
    width: '180',
    fixed: 'right',
    align: 'center'
  }
]

const getGuideLevelType = (level: number) => {
  const types = {
    1: 'primary',
    2: 'success',
    3: 'warning'
  }
  return types[level] || 'info'
}

const getServiceLevelType = (level: number) => {
  const types = {
    1: 'success',
    2: 'warning',
    3: 'danger'
  }
  return types[level] || 'info'
}
</script>

<style scoped>
.contract-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
  padding-bottom: 80px;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.table-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

.custom-tabs {
  padding: 16px 20px 0;
}

:deep(.el-table) {
  margin: 0;
  border: none;
  color: #606266;
  /* 表格行hover效果增强 */
  .el-table__row:hover {
    td {
      background-color: #f5f7fa !important;
      transition: background-color 0.3s;
    }
    
    /* 金额列hover特效 */
    td[style*="color: #F56C6C"],
    td[style*="color: #67C23A"],
    td[style*="color: #409EFF"] {
      transform: scale(1.05);
      transition: transform 0.2s;
    }
  }

  /* 表格单元格通用样式 */
  .cell {
    line-height: 24px;
    padding: 8px 12px;
  }

  /* 带标签样式的单元格动画效果 */
  td[style*="border-radius"] {
    .cell {
      transition: all 0.3s ease;
    }
    
    &:hover .cell {
      transform: scale(1.05);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
  }

  /* 增强额列的悬停效果 */
  .el-table__row:hover {
    td[style*="color: #F56C6C"],
    td[style*="color: #E6A23C"],
    td[style*="color: #67C23A"] {
      transform: scale(1.05);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      z-index: 1;
    }
  }

  /* 金额列的通用样式 */
  td[style*="color: #F56C6C"],
  td[style*="color: #E6A23C"],
  td[style*="color: #67C23A"] {
    position: relative;
    transition: all 0.3s ease;
    
    .cell {
      padding: 4px 8px;
      border-radius: 4px;
    }
  }
}

/* 表头样式优化 */
:deep(.el-table__header) {
  th {
    background-color: #f5f7fa;
    font-weight: 600;
    color: #333;
    height: 50px;
    
    &.is-leaf {
      border-bottom: 2px solid #EBEEF5;
    }
  }
}

/* 分割线样式优化 */
:deep(.el-table__row) {
  td {
    border-bottom: 1px solid #EBEEF5;
    
    &:not(:last-child) {
      border-right: 1px solid #EBEEF5;
    }
  }
}

.custom-form {
  padding: 20px;
}

.full-width {
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

:deep(.el-select),
:deep(.el-date-editor) {
  width: 100%;
}

:deep(.el-input-number) {
  width: 100%;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 24px;
  margin-bottom: 60px;
  background-color: #fff;
  border-top: 1px solid #EBEEF5;
}

:deep(.el-pagination) {
  padding: 0;
  font-weight: normal;
}

:deep(.el-pagination .el-pagination__total) {
  font-weight: normal;
}

:deep(.el-button--primary.is-link) {
  font-size: 14px;
  padding: 4px 0;
  &:hover {
    color: #409EFF;
    background-color: #ecf5ff;
    padding: 4px 12px;
    border-radius: 4px;
  }
}

:deep(.el-button--primary.is-link) {
  transition: all 0.3s;
  &:hover {
    background-color: #ecf5ff;
    padding: 4px 12px;
    border-radius: 4px;
  }
}

:deep(.el-table .cell) {
  line-height: 23px;
  padding: 0 12px;
}

:deep(.el-table__empty-text) {
  color: #909399;
  font-size: 14px;
  padding: 60px 0;
}

/* 服务等级单元格悬停效果 */
:deep(.el-table__row:hover) td {
  &[style*="background-color"] {
    transform: scale(1.05);
  }
}

/* 添加金额列的渐变背景效果 */
:deep(.el-table__row) td {
  &[style*="background-color: #fef0f0"] .cell,
  &[style*="background-color: #fdf6ec"] .cell,
  &[style*="background-color: #f0f9eb"] .cell {
    background: linear-gradient(45deg, transparent, var(--el-color-primary-light-9));
    border-radius: 4px;
  }
}

/* 添加到已有的样式中 */
.contract-id {
  font-family: Monaco, monospace;
  color: #606266;
  font-weight: bold;
}

.route-name {
  color: #303133;
  cursor: pointer;
  &:hover {
    color: var(--el-color-primary);
  }
}

.guide-name {
  font-weight: 500;
  color: #303133;
}

.guide-level-tag {
  min-width: 80px;
  transform: scale(0.9);
  transition: all 0.3s;
  
  &:hover {
    transform: scale(1);
  }
}

.service-level-tag {
  min-width: 80px;
  transform: scale(0.9);
  transition: all 0.3s;
  
  &:hover {
    transform: scale(1);
  }
}

.branch-name {
  color: #606266;
  padding: 2px 8px;
  background: #f5f7fa;
  border-radius: 4px;
}

.price-cell {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-family: Monaco, monospace;
  transition: all 0.3s;
  
  &.positive {
    color: #67C23A;
    background-color: #f0f9eb;
    &:hover {
      background-color: #e1f3d8;
    }
  }
  
  &.negative {
    color: #F56C6C;
    background-color: #fef0f0;
    &:hover {
      background-color: #fde2e2;
    }
  }
  
  &.warning {
    color: #E6A23C;
    background-color: #fdf6ec;
    &:hover {
      background-color: #faecd8;
    }
  }
}

/* 表格hover效果优化 */
:deep(.el-table__row) {
  transition: all 0.3s;
  
  &:hover {
    background-color: #f5f7fa;
    
    .price-cell,
    .guide-level-tag,
    .service-level-tag {
      transform: scale(1.05);
    }
  }
}
</style> 